<template>
  <div class="treemap-table-wrapper">
    <e-treemap :chartData="treemapData" @q-click="rectTreeMapClickHandle" />
    <Modal
      v-model="showTable"
      class="table-modal"
      title="详情"
      @on-cancel="onTableModelCancel"
      width="96%"
      :styles="{ top: '30px', height: '85%' }"
    >
      <table-page
        class="table-wrapper"
        :fit="true"
        :columns="columns"
        :value="tableData"
        :total="total"
        :pageNum="pageNum"
        :pageSize="pageSize"
        :loading="loading"
        @on-change-page="onChangePage"
        :stripe="false"
        size="small"
        :border="false"
        :no-data-text="tableHint"
      >
      </table-page>
      <div slot="footer">
        <Button @click="onTableModelCancel" ghost>关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { each, merge } from 'lodash'
import tableMixin from '@/mixins/table'
import tableColums from './tableColums'
import { eTreemapOptions } from './chartOptions/index'
import { getTreemapData, getTableDataByGasNature } from '@/api/meterManagedistribution'

export default {
  name: 'gasNatureTreemapAndTable',
  mixins: [tableMixin],
  props: {
    options: {
      type: Object
    }
  },
  components: {
    ETreemap: () => import('@/commons/charts/ETreemap')
  },
  data() {
    return {
      columns: this.renderTableColums(),
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      tableHint: '',
      showTable: false,
      treemapData: null,
      currentGasClass: undefined
    }
  },
  created() {
    this.fetchTreemapData()
  },
  methods: {
    /**
     * desc: 显示加载loading
     * param {type}
     * return: void
     */
    showFetchLoading() {
      this.$Spin.show({
        render: h => {
          return h('div', [
            h('Icon', {
              class: 'spin-icon-load',
              props: {
                type: 'ios-loading',
                size: 20
              }
            }),
            h('div', '图表生成中...')
          ])
        }
      })
    },
    /**
     * desc: 隐藏请求loading
     * param {type}
     * return: void
     */
    hideFetchLoading() {
      this.$Spin.hide()
    },
    /**
     * desc: 关闭表格模态框
     * param {type}
     * return: void
     */
    onTableModelCancel() {
      this.showTable = false
      this.tableData = null
    },
    /**
     * 表格行设置
     * @return {[type]} [description]
     */
    renderTableColums() {
      return tableColums
    },
    /**
     * @msg: 矩形树图点击
     * @param {type}
     * @return:
     */
    rectTreeMapClickHandle(data) {
      this.showTable = true
      this.meterGasClass = data.data.pname
      this.status = data.data.status
      this.currentGasClass = data.name
      this.loadAjax()
    },
    /**
     * @msg: 整理关系图数据
     * @param {type}
     * @return:
     */
    modifyTreemapData(data = []) {
      const _serList = []
      each(data, item => {
        const { count, meterGasClass } = item
        _serList.push({
          name: meterGasClass,
          value: count
        })
      })

      this.treemapData = merge({}, eTreemapOptions, {
        series: [
          {
            data: _serList
          }
        ]
      })
    },
    /**
     * @msg: 请求矩形树图数据
     * @param {type}
     * @return:
     */
    fetchTreemapData() {
      const { year, ...rest } = this.options
      this.showFetchLoading()
      getTreemapData({
        year,
        ...rest
      })
        .then(res => {
          if (res.date && res.date.length >= 0) {
            this.modifyTreemapData(res.date)
          }
        })
        .finally(() => {
          this.hideFetchLoading()
        })
    },
    /**
     * desc: 加载表格数据
     * param {type}
     * return: void
     */
    loadAjax() {
      const { pageNum, pageSize } = this
      const { year, ...rest } = this.options
      this.tableHint = '正在刷新…'
      this.loading = true

      getTableDataByGasNature({
        gasClass: this.currentGasClass,
        pageNum,
        pageSize,
        year,
        ...rest
      })
        .then(res => {
          if (res.date && res.date.list && res.date.list.length > 0) {
            const { total, list, pageNum, pageSize } = res.date
            this.total = total
            this.pageNum = pageNum
            this.pageSize = pageSize
            this.tableData = list
          } else {
            this.tableData = []
            this.tableHint = '暂无数据'
          }
          this.loading = false
        })
        .catch(() => {
          this.tableHint = '暂无数据'
          this.loading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
